<template>
  <div class="schedule-list-view">
    <!-- 筛选器 -->
    <div class="filters">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索日程..."
        :prefix-icon="Search"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
        style="width: 200px; margin-right: 12px;"
      />
      
      <el-select
        v-model="filterStatus"
        placeholder="状态"
        clearable
        @change="handleFilter"
        style="width: 120px; margin-right: 12px;"
      >
        <el-option label="待处理" value="pending" />
        <el-option label="进行中" value="in_progress" />
        <el-option label="已完成" value="completed" />
        <el-option label="已取消" value="cancelled" />
      </el-select>
      
      <el-select
        v-model="filterPriority"
        placeholder="优先级"
        clearable
        @change="handleFilter"
        style="width: 120px;"
      >
        <el-option label="低" value="low" />
        <el-option label="中" value="medium" />
        <el-option label="高" value="high" />
      </el-select>
    </div>

    <!-- 日程列表 -->
    <div class="schedule-items">
      <el-empty v-if="filteredSchedules.length === 0 && !scheduleStore.loading" description="暂无日程" />
      
      <el-skeleton v-else-if="scheduleStore.loading" :rows="5" animated />
      
      <template v-else>
        <div
          v-for="schedule in filteredSchedules"
          :key="schedule.id"
          class="schedule-item"
          :class="{ 
            'is-completed': schedule.status === 'completed',
            'is-cancelled': schedule.status === 'cancelled'
          }"
        >
          <div class="schedule-content">
            <div class="schedule-header">
              <div class="schedule-title">
                <el-tag
                  :type="getPriorityTagType(schedule.priority || 'low')"
                  size="small"
                  style="margin-right: 8px;"
                >
                  {{ getPriorityText(schedule.priority || 'low') }}
                </el-tag>
                <span class="title-text">{{ schedule.title }}</span>
              </div>
              
              <div class="schedule-actions">
                <el-dropdown @command="(cmd: string) => handleAction(cmd, schedule)">
                  <el-button :icon="More" circle size="small" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="edit" :icon="Edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="status" :icon="Check">更新状态</el-dropdown-item>
                      <el-dropdown-item divided command="delete" :icon="Delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            
            <div class="schedule-info">
              <div class="info-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ formatDateTime(schedule.start_time) }} - {{ formatDateTime(schedule.end_time) }}</span>
              </div>
              
              <div v-if="schedule.description" class="info-item">
                <el-icon><Document /></el-icon>
                <span>{{ schedule.description }}</span>
              </div>
            </div>
            
            <div class="schedule-footer">
              <div class="schedule-status">
                <el-tag
                  :type="getStatusTagType(schedule.status || 'pending')"
                  size="small"
                >
                  {{ getStatusText(schedule.status || 'pending') }}
                </el-tag>
              </div>
              
              <div class="schedule-time">
                <el-icon><Clock /></el-icon>
                <span>{{ formatRelativeTime(schedule.created_at) }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 分页 -->
    <div v-if="scheduleStore.total > 0" class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="scheduleStore.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  Search,
  More,
  Edit,
  Check,
  Delete,
  Calendar,
  Document,
  Clock
} from '@element-plus/icons-vue'
import { useScheduleStore } from '@/stores/schedule'
import type { ScheduleResponse } from '@/api/models'

interface Props {
  searchKeyword: string
  filterStatus: string
  filterPriority: string
  currentPage: number
  pageSize: number
}

interface Emits {
  (e: 'update:searchKeyword', value: string): void
  (e: 'update:filterStatus', value: string): void
  (e: 'update:filterPriority', value: string): void
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'refresh'): void
  (e: 'edit', schedule: ScheduleResponse): void
  (e: 'status-change', schedule: ScheduleResponse): void
  (e: 'delete', schedule: ScheduleResponse): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const scheduleStore = useScheduleStore()

// 计算属性
const searchKeyword = computed({
  get: () => props.searchKeyword,
  set: (value) => emit('update:searchKeyword', value)
})

const filterStatus = computed({
  get: () => props.filterStatus,
  set: (value) => emit('update:filterStatus', value)
})

const filterPriority = computed({
  get: () => props.filterPriority,
  set: (value) => emit('update:filterPriority', value)
})

const currentPage = computed({
  get: () => props.currentPage,
  set: (value) => emit('update:currentPage', value)
})

const pageSize = computed({
  get: () => props.pageSize,
  set: (value) => emit('update:pageSize', value)
})

const filteredSchedules = computed(() => {
  let schedules = scheduleStore.schedules
  
  if (searchKeyword.value) {
    schedules = schedules.filter(schedule => 
      schedule.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      (schedule.description && schedule.description.toLowerCase().includes(searchKeyword.value.toLowerCase()))
    )
  }
  
  if (filterStatus.value) {
    schedules = schedules.filter(schedule => schedule.status === filterStatus.value)
  }
  
  if (filterPriority.value) {
    schedules = schedules.filter(schedule => schedule.priority === filterPriority.value)
  }
  
  return schedules
})

// 方法
const getPriorityTagType = (priority: string) => {
  const map: Record<string, string> = {
    low: 'info',
    medium: 'warning',
    high: 'danger'
  }
  return map[priority] || 'info'
}

const getPriorityText = (priority: string) => {
  const map: Record<string, string> = {
    low: '低',
    medium: '中',
    high: '高'
  }
  return map[priority] || '低'
}

const getStatusTagType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'info',
    'in-progress': 'warning',
    completed: 'success',
    cancelled: 'danger'
  }
  return map[status] || 'info'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待处理',
    'in-progress': '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return map[status] || '待处理'
}

const formatDateTime = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatRelativeTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
  if (diff < 2592000000) return `${Math.floor(diff / 86400000)} 天前`
  
  return date.toLocaleDateString('zh-CN')
}

const handleSearch = () => {
  currentPage.value = 1
  emit('refresh')
}

const handleFilter = () => {
  currentPage.value = 1
  emit('refresh')
}

const handleAction = async (command: string, schedule: ScheduleResponse) => {
  switch (command) {
    case 'edit':
      emit('edit', schedule)
      break
      
    case 'status':
      emit('status-change', schedule)
      break
      
    case 'delete':
      emit('delete', schedule)
      break
  }
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  emit('refresh')
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  emit('refresh')
}
</script>

<style scoped>
.schedule-list-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px var(--shadow-color);
}

.schedule-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-item {
  padding: 16px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px var(--shadow-color);
  transition: all 0.3s ease;
}

.schedule-item:hover {
  box-shadow: 0 4px 20px var(--shadow-color);
}

.schedule-item.is-completed {
  opacity: 0.7;
}

.schedule-item.is-cancelled {
  opacity: 0.5;
}

.schedule-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.schedule-title {
  display: flex;
  align-items: center;
  flex: 1;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.schedule-actions {
  display: flex;
  align-items: center;
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-color);
}

.schedule-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.schedule-status {
  display: flex;
  align-items: center;
}

.schedule-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .filters .el-input,
  .filters .el-select {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  .schedule-header {
    flex-direction: column;
    gap: 8px;
  }
  
  .schedule-footer {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  
  .schedule-item {
    padding: 12px;
  }
  
  .title-text {
    font-size: 14px;
  }
  
  .info-item {
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-item .el-icon {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .filters {
    padding: 12px;
    gap: 6px;
  }
  
  .schedule-item {
    padding: 8px;
    margin-bottom: 8px;
  }
  
  .title-text {
    font-size: 13px;
  }
  
  .schedule-actions .el-button {
    width: 28px;
    height: 28px;
  }
  
  .schedule-header {
    gap: 6px;
  }
  
  .schedule-footer {
    gap: 4px;
  }
  
  .pagination {
    padding: 12px 4px;
  }
  
  :deep(.el-pagination) {
    justify-content: center;
  }
  
  :deep(.el-pagination .el-pagination__total) {
    display: none;
  }
  
  :deep(.el-pagination .el-pagination__sizes) {
    display: none;
  }
  
  :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}
</style>
